<template>
    <div>
        <sticky :z-index="10" class-name="sub-navbar">
            <el-button style="margin-left: 10px;" type="primary" :disabled="disabled" @click="handleSubmit">
                保存修改
            </el-button>
            <el-button style="margin-left: 10px;" type="warning" :disabled="disabled" @click="handleReset">
                重置导航
            </el-button>
        </sticky>
        <div class="components-container">
            <div class="board" style="margin-top: 40px;margin-bottom: 60px;min-height: 300px;">
                <Kanban
                    v-for="title in titleList"
                    :key="title.titleId"
                    v-model="title.titleName"
                    :list="title.categoryList"
                    :group="group"
                    class="kanban"
                />
            </div>
            <div class="board" style="min-height: 300px;">
                <Kanban
                    :key="0"
                    unused
                    :list="unusedCategoryList"
                    :group="group"
                    class="kanban unused"
                    style="width: 80%"
                />
            </div>
        </div>

    </div>

</template>
<script>
import Kanban from '@/components/Kanban'
import Sticky from '@/components/Sticky'
import { getNavTitleList, updateNavTitleList } from '@/api/category' // 粘性header组件

export default {
    name: 'NavTitle',
    components: {
        Kanban, Sticky
    },
    data() {
        return {
            group: 'navigation',
            titleList: [
                {
                    titleId: 1,
                    titleName: '系概况',
                    categoryList: [
                        { name: '系概况', id: 1 }
                    ]
                },
                {
                    titleId: 2,
                    titleName: '人才培养',
                    categoryList: [
                        { name: '本科生教学', id: 2 },
                        { name: '研究生教学', id: 3 },
                        { name: '国际教育', id: 4 }
                    ]
                },
                {
                    titleId: 3,
                    titleName: '科学研究',
                    categoryList: [
                        { name: '科学研究', id: 5 }
                    ]
                },
                {
                    titleId: 4,
                    titleName: '实践教学',
                    categoryList: [
                        { name: '实践教学', id: 6 }
                    ]
                },
                {
                    titleId: 5,
                    titleName: '学生工作',
                    categoryList: [
                        { name: '学生工作', id: 7 }
                    ]
                },
                {
                    titleId: 6,
                    titleName: '信息服务',
                    categoryList: [
                        { name: '信息服务', id: 8 }
                    ]
                }
            ],
            unusedCategoryList: [
                { name: '生活趣事', id: 9 },
                { name: '团建消息', id: 10 },
                { name: '表白墙', id: 11 }
            ],
            // 保存/重置按钮禁用
            disabled: false
        }
    },
    created() {
        this.setNavTitle()
    },
    methods: {
        // 导航栏数据填充
        setNavTitle() {
            return getNavTitleList().then(data => {
                this.titleList = data.titleList
                this.unusedCategoryList = data.unusedList
            })
        },
        // 判断当title下只有一个大类时, title名与该大类名相同
        headerText(title) {
            return title.categoryList.length === 1
                ? title.categoryList[0].name : title.titleName
        },
        // 提交/重置表单
        handleSubmit() {
            this.disabled = true
            updateNavTitleList(this.titleList).then(() => {
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })
                this.disabled = false
            }).catch(() => {
                this.disabled = false
            })
        },
        handleReset() {
            this.disabled = true
            this.setNavTitle().then(() => {
                this.$message({
                    type: 'info',
                    message: '重置成功'
                })
                this.disabled = false
            }).catch(() => {
                this.disabled = false
            })
        }
    }
}
</script>
<style lang="scss">
@import "@/styles/mixin";

.components-container {
    margin: 20px 70px;
}
.board {
    width: 100%;
  //margin-left: 20px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
    .kanban {
        @include nth-el-color(".board-column-header") using($color) {
            background-color: #{$color};
        }
        &.unused {
            .board-column-header {
                background: #f4f4f5;
                color: #909399;
            }
        }
    }
}
</style>

